<template>
  <div class="main" v-if="store.state.client && store.state.client.Modules">
    <div class="window-item" v-if="isShowHandler('查询') && !store.state.InHosNo" @click="selectBizType('查询')">
      <div><i class="iconfont icon-chaxun item-icon"></i></div>
      <div class="item-text">查询</div>
    </div>
    <div class="window-item" v-if="isShowHandler('签到')" @click="selectBizType('签到')">
      <div><i class="iconfont icon-fangkong item-icon"></i></div>
      <div class="item-text">签到</div>
    </div>
    <div class="window-item" v-if="isShowHandler('建档') && !store.state.InHosNo" @click="selectBizType('建档')">
      <div><i class="iconfont icon-fangkong item-icon"></i></div>
      <div class="item-text">建档</div>
    </div>
    <div class="window-item" v-if="isShowHandler('缴费') && !store.state.InHosNo" @click="selectBizType('缴费')">
      <div><i class="iconfont icon-jiaofei item-icon"></i></div>
      <div class="item-text">缴费</div>
    </div>
    <div class="window-item" v-if="isShowHandler('充值') && !store.state.InHosNo" @click="selectBizType('充值')">
      <div><i class="iconfont icon-cunkuan item-icon"></i></div>
      <div class="item-text">充值</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ReservationMixin from '@/mixins/reservation'

@Component
export default class PortraitHome extends mixins(ReservationMixin) {
  private async mounted () {
    this.setTip('请选择您要办理的业务')
    this.setMaxTime(60)
    this.updateTimeHandler('home')
  }

  private isShowHandler (name: string) {
    return this.store.state.client.Modules.findIndex(e => e.Name === name && e.IsEnable === '是') >= 0
  }

  private selectBizType (bizType: '查询' | '充值' | '缴费' | '建档' | '签到') {
    if (!this.store.state.patient) {
      this.$messageBox.show({ content: '系统检测到您尚未建档, 请前往收费处建档.' })
      return
    }
    if (bizType === '签到') {
      this.store.state.bizType = bizType
      this.clearTimeout()
      this.navigateTo(`/${this.getRoute()}/room`)
      return
    }
    if (bizType === '查询') {
      this.store.state.bizType = bizType
      this.clearTimeout()
      this.navigateTo(`/${this.getRoute()}/detail`)
      return
    }
    if (bizType === '充值') {
      this.store.state.bizType = bizType
      this.clearTimeout()
      this.navigateTo(`/${this.getRoute()}/add-input`)
      return
    }
    this.$messageBox.show({ content: `${bizType}功能暂不可用, 请稍后重试`, confirm: async () => { await this.$sleep(5000) } })
  }
}
</script>

<style scoped>
  .main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
  }
  .window-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 20rem;
    height: 25rem;
    background-color: white;
    margin: 2rem;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 3rem;
  }
  .item-icon {
    font-size: 8rem;
  }
  .item-text {
    margin-top: 3rem;
  }
</style>
